<template>
  <div class="preview-container">
    <el-dialog title="题目预览" :visible.sync="VisiblePreview" width="60%" :before-close="ClosePreview">
      <div class="preview-hr"></div>

      <el-card class="box-card">
        <!-- 第一行 -->
        <el-row>
          <el-col :span="12">
            <strong>【题库】: {{ questionsInfo.subjectName }}</strong></el-col>
          <el-col :span="12">
            <strong>【学科】: {{ questionsInfo.subjectName }}</strong></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <strong>【题型】:
              <span v-if="questionsInfo.questionType === '1'"> 单选题 </span>
              <span v-else-if="questionsInfo.questionType === '2'">
                多选题
              </span>
              <span v-else-if="questionsInfo.questionType === '3'">
                简答题
              </span>
            </strong></el-col>
          <el-col :span="6">
            <strong>【编号】: </strong>{{ questionsInfo.id }}</el-col>
          <el-col :span="6">
            <strong>【难度】:
              <span v-if="questionsInfo.difficulty === '1'"> 简单 </span>
              <span v-else-if="questionsInfo.difficulty === '2'"> 一般 </span>
              <span v-else-if="questionsInfo.difficulty === '3'">
                困难
              </span></strong></el-col>
          <el-col :span="6">
            <strong>【标签】: </strong>{{ questionsInfo.tags }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <strong> 【目录】:</strong>{{ questionsInfo.catalogID }}</el-col>
          <el-col :span="6">
            <strong> 【企业】:</strong> {{ questionsInfo.enterpriseID }}</el-col>
          <el-col :span="6">
            <strong> 【方向】:</strong>{{ questionsInfo.direction }}</el-col>
          <el-col :span="6">
            <strong> 【城市】:</strong>{{ questionsInfo.city }}</el-col>
        </el-row>
        <el-divider></el-divider>
        <!-- 题干部分 -->
        <strong> 【题干】:</strong>
        <p class="color-question" v-html="questionsInfo.question"></p>
        <!-- ------------------------------------------------------- -->
        <!-- 单选题 -->

        <div v-if="questionsInfo.questionType === '1'">
          <p>单选题选项：（以下选中的选项为正确答案）</p>
          <div v-for="option in questionsInfo.options" :key="option.code">
            <el-radio :value="option.isRight ? option.id : ''" :label="option.id">{{ option.code }}: {{ option.title }}</el-radio>
            <img class="option-img" v-if="option.img" :src="option.img" />
          </div>
        </div>
        <!-- 多选题 -->
        <div v-else-if="questionsInfo.questionType === '2'">
          <p>多选题选项：（以下选中的选项为正确答案）</p>
          <el-checkbox-group v-model="checkList">
            <div v-for="option in questionsInfo.options" :key="option.code">
              <el-checkbox :label="option.id">{{ option.code }}: {{ option.title }}</el-checkbox>
              <img class="option-img" v-if="option.img" :src="option.img" />
              <!-- <img class="option-img" src="http://www.itcast.cn/2018czgw/images/technology/icon1.png" /> -->
            </div>
          </el-checkbox-group>
        </div>
        <!-- 简答题 -->
        <div v-if="questionsInfo.questionType === '3'">
          <p>简答题</p>
        </div>
        <!-- ------------------------------------------------------- -->
        <el-divider></el-divider>
        <div>
          <strong> 【参考答案】:</strong>
          <el-button class="btnMp4" size="small" @click="videoShowClick">视频答案预览</el-button>
        </div>
        <video v-show="videoShow" controls="false" class="questionsInfo-videos" :src="questionsInfo.videoURL"></video>
        <el-divider></el-divider>
        <div>
          <strong> 【答案解析】:</strong><i v-html="questionsInfo.answer" />
        </div>
        <el-divider></el-divider>
        <div><strong> 【题目备注】:</strong>{{ questionsInfo.remarks }}</div>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="ClosePreview">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getitemlsit } from '@/assets/api/base/itemlist.js';

export default {
  name: 'preview',
  props: {
    id: {
      type: [String, Number]
      // required: true
    },
    VisiblePreview: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      questionsInfo: [],
      // radio: '', // 单选框
      checkList: [],
      videoShow: false
    };
  },
  created () {
    this.loadInfo();
  },
  methods: {
    ClosePreview () {
      this.$emit('ClosePreview');
    },
    async loadInfo () {
      try {
        const { data } = await getitemlsit(this.id);
        this.questionsInfo = data;
        // 将复选框中选中的项传入到  checkList 中
        const arr = [];
        this.questionsInfo.options.forEach(item => {
          if (item.isRight) {
            arr.push(item.id);
          }
        });
        this.checkList = arr;
      } catch (err) {
        this.$message.error('题目详情获取失败');
      }
    },
    videoShowClick () {
      this.videoShow = !this.videoShow;
    }
  },
  computed: {}
};
</script>

<style lang="less" scoped>
.preview-container {
  .box-card {
    width: 100% !important;
    box-sizing: border-box;
    min-width: unset;
  }
  .el-row {
    margin-top: 10px;
  }
  .btnMp4 {
    margin-left: 20px;
  }
  .questionsInfo-videos {
    margin-top: 20px;
    height: 240px;
  }
  .color-question {
    color: #3f6bfc;
  }
  .el-radio,
  .el-checkbox {
    margin-top: 15px;
  }
  .option-img {
    margin-top: 10px;
    margin-left: 25px;
  }
}
</style>
